<template>
  <div class="container">
    <div class="top-box">
      <div class="left-box">
        <div class="color-box"></div>
        <p>采购计划</p>
      </div>
      <div class="right-box">
        <el-button type="info" icon="el-icon-back" class="btn_fanhui" @click="Return">返回</el-button>
      </div>
    </div>
    <div class="content-box">
      <div class="table-box">
        <div class="up-box">采购计划表</div>
        <div class="bottom-box">
          <div class="item6-box">申请类型</div>
          <div class="item7-box">
            <el-select v-model="oneVal" placeholder="请选择" @change="jdFl" style="width:25%;">
              <el-option
                v-for="item in jdoneList"
                :key="item.id"
                :label="item.typeName"
                :value="item.id"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="conten-box">
          <el-table :data="list" border style="width: 100%" :max-height="400">
            <el-table-column prop="xuhao" label="序号" type="index" align="center" width="120"></el-table-column>
            <el-table-column prop="name" label="名称" width="170" align="center">
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.name"
                  @change="jdGoods(scope.row,scope.$index)"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in jdgoods"
                    :key="item.id"
                    :label="item.goodsName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop label="规格" align="center" width="170">
              <template slot-scope="scope">
                <el-input type="text" v-model="scope.row.standard"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop label="单位" align="center" width="170">
              <template slot-scope="scope">
                <el-input type="text" v-model="scope.row.unit"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop label="期初数" align="center" width="170">
              <template slot-scope="scope">
                <el-input type="text" v-model="scope.row.openblan"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop label="入库数" align="center" width="170">
              <template slot-scope="scope">
                <el-input type="text" v-model="scope.row.putin"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop label="出库数" align="center" width="170">
              <template slot-scope="scope">
                <el-input type="text" v-model="scope.row.outnum"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop label="库存数" align="center" width="170">
              <template slot-scope="scope">
                <el-input type="text" v-model="scope.row.inventorynum"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop label="备注" align="center">
              <template slot-scope="scope">
                <el-input type="text" v-model="scope.row.remark"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="操作" align="center" width="220">
              <template slot-scope="scope">
                <el-button
                  size="small"
                  type="primary"
                  v-show="scope.$index == 0"
                  @click="shangchu(scope)"
                >新增</el-button>
                <el-button
                  size="small"
                  type="danger"
                  icon="el-icon-delete"
                  v-show="scope.$index !== 0"
                  @click="shangchu(scope)"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="btn-box">
        <el-button type="primary" @click=" addlist()">确定</el-button>
        <el-button type="info" @click="Return">返回</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data () {
    return {
      empno: "",
      applytype: "",
      options: [],
      options1: [],
      value: "",
      list: [
        {
          name: "",
          standard: "",
          unit: "",
          openblan: "",
          putin: "",
          outnum: "",
          inventorynum: "",
          remark: ""
        }
      ],
      creater: 0,
      jdoneList: [],
      oneVal: "",
      oneType: 0,
      jdgoods: [],
      Mark: 0,
    };
  },
  created () {
    this.creater = JSON.parse(localStorage.getItem("message")).Id;
    this.getOne();
  },
  methods: {
    getOne () {
      //接待分类
      var obj = { creater: this.creater };
      var objs = JSON.stringify(obj);
      let thee = { index: 15, jsondata: objs }
      axios.post("/apis/MyCenter.asmx/GetData", thee).then(({ data }) => {
        var list = JSON.parse(data.d);
        this.jdoneList = list;
      });

    },
    jdFl (e) {
      this.jdtwoList = []; this.jdgoods = [];
      this.oneType = e;
      //用品名称
      if (this.oneType != 0) {
        var obj = { fid: this.oneType };
        var objs = JSON.stringify(obj);
        let the = { index: 12, jsondata: objs }
        axios.post("/apis/AdministrationManage.asmx/GetData", the).then(({ data }) => {
          var list = JSON.parse(data.d);
          this.jdgoods = list;
        });
      }
    },
    jdGoods (item, index) {
      this.list[index].unit = ""; this.list[index].inventorynum = "";
      //用品名称
      if (this.list[index].name != "") {
        var obj = { id: this.list[index].name };
        var objs = JSON.stringify(obj);
        let the = { index: 13, jsondata: objs }
        axios.post("/apis/AdministrationManage.asmx/GetData", the).then(({ data }) => {
          var list = JSON.parse(data.d);
          this.list[index].unit = list.goodsUnit; this.list[index].inventorynum = list.num;
        });
      }
    },
    // 动态删除
    shangchu (i) {
      if (i.$index == 0) {
        var lists = {
          name: "",
          standard: "",
          unit: "",
          openblan: "",
          putin: "",
          outnum: "",
          inventorynum: "",
          remark: ""
        };
        this.list.push(lists);      }
      else { this.list.splice(i.$index, 1); }
      console.log(this.list)
    },

    Return () {
      window.history.go(-1);
    },
    addlist () {
      if (this.Mark == 0) {
        if(this.oneType==0){this.$message.error("请选择类型");return;}
        var obj = {
          creater: this.creater,
          oneType: this.oneType,
          data: this.list
        };
        var objs = JSON.stringify(obj); let the = { index: 5, jsondata: objs };
        // console.log(obj)
        this.Mark = 1;
        axios.post("/apis/AdministrationManage.asmx/Add", the).then(({ data }) => {
          var list = JSON.parse(data.d);
          if (list.flag == true) {
            this.$message.success(list.tip);
            setTimeout(() => {
              window.history.go(-1);
            }, 500);
          } else {
            this.$message.error(list.tip);
          }
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import '@/assets/scss/base.scss';
.top-box {
  width: 100%;
  height: 60px;
  overflow: hidden;
  // border: 1px solid $red;
}
.add-box {
  width: 10%;
  text-align: center;
  line-height: 70px;
  // border: 1px solid $red;
}
.left-box {
  width: 100px;
  height: 40px;
  float: left;
  margin-top: 10px;
  overflow: hidden;
  margin-left: 1%;
  // border: 1px solid red;
}
.color-box {
  width: 5px;
  height: 20px;
  float: left;
  margin-top: 10px;
  background-color: $Header_color;
}
.left-box p {
  float: left;
  margin-left: 5px;
  line-height: 40px;
}
.right-box {
  float: right;
  width: 90px;
  height: 40px;
  margin-right: 2%;
  border-radius: 8px;
  margin-top: 10px;
  background-color: $return-color;
  // border: 1px solid red;
}
.right-box:hover {
  background-color: #a4a6ad;
}
.right-box span {
  float: left;
  color: $white;
  font-size: $font-size-medium;
  line-height: 40px;
  //  border: 1px solid red;
}
.right-box img {
  width: 30px;
  height: 30px;
  margin-top: 5px;
  margin-left: 6px;
  float: left;
  // border: 1px solid red;
}
.content-box {
  width: 98%;
  height: 720px;
  margin: 0 auto;
  border-radius: 8px;
  background-color: $white;
  border: 1px solid $bordercolor;
}
.up-box {
  width: 100%;
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: $font-size-large;
  font-weight: bold;
  border-bottom: 1px solid $bordercolor;
}
.table-box {
  width: 94%;
  // height: 578px;
  margin: 0 auto;
  margin-top: 50px;
  //    border-top: 1px solid $bordercolor;
  //  border-left: 1px solid $bordercolor;
  //   border-right: 1px solid $bordercolor;
}
.bottom-box {
  display: flex;
  width: 100%;
  height: 70px;
  border-left: 1px solid $bordercolor;
  border-right: 1px solid $bordercolor;
}

.btom-box {
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid $bordercolor;
}
.xuhao-box {
  width: 9%;
  height: 60px;
  float: left;
  line-height: 60px;
  text-align: center;
  font-weight: bold;
  border-right: 1px solid $bordercolor;
  // border: 1px solid red;
}
.xuhao1-box {
  width: 18%;
  height: 60px;
  float: left;
  line-height: 60px;
  text-align: center;
  font-weight: bold;
  border-right: 1px solid $bordercolor;
  // border: 1px solid red;
}
.xuhao2-box {
  width: 9%;
  height: 60px;
  float: left;
  line-height: 60px;
  text-align: center;
  font-weight: bold;
  //border: 1px solid red;
}
.com-box {
  width: 100%;
  height: 60px;
  // border-bottom:1px solid  $bordercolor;
}
.conten-box {
  width: 100%;
}
.conten-box ul {
  overflow: hidden;
}
.conten-box ul li {
  width: 100%;
  height: 60px;
  // border-bottom:1px solid  $bordercolor;
}
.item6-box {
  width: 120px;
  height: 70px;
  float: left;
  line-height: 70px;
  text-align: center;
  font-weight: bold;
  border-right: 1px solid $bordercolor;
}
.item7-box {
  flex: 1;
  height: 70px;
  float: left;
  line-height: 70px;

  margin-left: 38%;
  font-weight: bold;
  // border-right: 1px solid $bordercolor;
}
.item-box {
  width: 120px;
  height: 60px;
  float: left;
  line-height: 60px;
  text-align: center;
  font-weight: bold;
  border-right: 1px solid $bordercolor;
}
.item-box input {
  width: 100%;
  height: 59px;
  border: none;
  outline: none;
  font-size: 14px;
}
.item1-box {
  width: 200px;
  height: 60px;
  float: left;
  line-height: 60px;
  text-align: center;
  font-weight: bold;
  border-right: 1px solid $bordercolor;
}
.item3-box input {
  width: 100%;
  height: 59px;
  border: none;
  outline: none;
  font-size: 14px;
}

input::-ms-input-placeholder {
  text-align: center;
}
input::-webkit-input-placeholder {
  text-align: center;
}
.item3-box {
  width: 110px;
  height: 60px;
  float: left;
  line-height: 60px;
  text-align: center;
  font-weight: bold;
  // border-right: 1px solid $bordercolor;
}
.btn-box {
  width: 20%;
  height: 60px;
  margin: 0 auto;
  margin-top: 20px;
  // border: 1px solid red;
}
</style>
